<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task Manager</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="../bootstrap.css" rel="stylesheet">
    <script src="../js/bootstrap-modal.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            padding-top: 60px;
        }
        .menu ul
        {
            margin: 10px 0 0px 0px;
        }
        .menu li
        {
            list-style-type: none;
            width: 100px;
            padding-top: 6px;
            padding-left: 10px;
            padding-bottom: 6px;
            font-size: 16px;
        }
        
        .menu li a
        {
            text-decoration: none;
            color: #808080;
        }
        
        .menu li:hover
        {
            background-color: #EEEEEE;
        }
        
        #menu-item-active
        {
            color: #DD4B39;
        }
    </style>
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
    <script src="js/jquery/jquery.tablesorter.min.js"></script>
    <script>
        $(function () {
            $("table#sortTableExample").tablesorter({ sortList: [[1, 0]] });
        });
    </script>
    <div class="topbar">
        <div class="topbar-inner">
            <div class="container-fluid">
                <a class="brand" href="#">Task Manager</a>
                <ul class="nav">
                    <li class="dropdown"><a href="#" class="dropdown-toggle">Task</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Create</a></li>
                            <li><a href="#">Search</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle">Project</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Create</a></li>
                            <li><a href="#">Search</a></li>
                        </ul>
                    </li>
                    <li><a href="#users">Users</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
                <form class="pull-left" action="">
                <input type="text" placeholder="Search">
                </form>
                <p class="pull-right">
                    Logged in as <a href="#">username</a></p>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="sidebar">
            <a class="btn primary" href="#Create">Create Task</a>
            <div class="menu">
                <ul>
                    <li><a href="#">My Tasks</a></li>
                    <li><a href="#">All Tasks</a></li>
                    <li><a href="#">Owned by me</a></li>
                    <li><a href="#">Completed</a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <ul class="pills">
                <li class="active"><a href="#">Projects</a></li>
                <li><a href="#">Task summary 2</a></li>
                <li><a href="#">Task summary 3</a></li>
            </ul>
            <form>
            <fieldset class="well">
                <div class="row">
                    <div class="span3" style="width: auto">
                        <a class="btn" href="#">Create Project</a></div>
                    <div class="span3" style="width: auto; margin-top: 5px">
                        <input type="checkbox" />
                        <span>Show Closed projects</span>
                    </div>
                </div>
                <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true"
                    class="btn danger">
                    Launch Modal</button>
            </fieldset>
            </form>
            <table class="zebra-striped" id="sortTableExample">
                <thead>
                    <tr>
                        <th class="header">
                            #
                        </th>
                        <th class="yellow header headerSortDown">
                            First Name
                        </th>
                        <th class="blue header">
                            Last Name
                        </th>
                        <th class="green header">
                            Language
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Joe
                        </td>
                        <td>
                            Sixpack
                        </td>
                        <td>
                            English
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Stu
                        </td>
                        <td>
                            Dent
                        </td>
                        <td>
                            Code
                        </td>
                    </tr>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            Your
                        </td>
                        <td>
                            One
                        </td>
                        <td>
                            English
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
